<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-select style="width: 120px;" v-model="find_data.childSys" placeholder="子系统">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="旅行社" value="PC_TRAVEL_AGENCY"></el-option>
                        <el-option label="车队" value="PC_CAR_TEAM"></el-option>
                        <el-option label="酒店" value="PC_HOTEL"></el-option>
                    </el-select>
                    <el-input style="width: 220px;margin-left: 20px;" v-model="find_data.find" placeholder="请输入菜单名称"
                        clearable prefix-icon="Search" />
                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;">
                    <el-button @click="add_btn" type="primary" icon="SuccessFilled">添加</el-button>
                    <el-button @click="up_btn" type="warning" icon="WarnTriangleFilled">修改</el-button>
                    <el-button @click="del_btn" type="danger" icon="CircleCloseFilled">删除</el-button>
                </div>
            </template>
            <div>
                <el-table highlight-current-row ref="srcMenuListTb" row-key="id" border fit
                    @row-click="selection_change_btn" height="67vh" :data="list_data" style="width: 100%"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <!-- <el-table-column type="selection" width="35" /> -->
                    <!-- <el-table-column label="编号" width="55" fixed type="index" /> -->

                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field" :label="item.label">

                            <template v-if="item.field == 'menuName'" #="{ row, column, $index }">
                                <span style="font-weight: 700;"> <el-icon>
                                        <component :is="row.micon"></component>
                                    </el-icon> {{ row.menuName }}</span>
                            </template>
                            <template v-if="item.field == 'mtype'" #="{ row, column, $index }">
                                <span
                                    :style="row.mtype == 'SIDEBAR_MENU_GROUP' ? 'color:yellow;' : row.mtype == 'SIDEBAR_MENU'
                                        ? 'color:green;' : row.mtype == 'FILTER' ? 'color:red;' : row.mtype == 'BUTTON' ? 'color:blue;' : 'color:red;'">{{
        row.mtype == 'SIDEBAR_MENU_GROUP' ? '侧边栏菜单组' : row.mtype == 'SIDEBAR_MENU'
        ? '侧边栏菜单' : row.mtype == 'FILTER' ? '筛选条件' : row.mtype == 'BUTTON' ? '按钮' : '无'
    }}</span>
                            </template>

                            <template v-if="item.field == 'childSys'" #="{ row, column, $index }">
                                <!-- <span :style="row.childSys == 'PC_CAR_TEAM' ? 'color:blue;' : row.childSys == 'PC_TRAVEL_AGENCY'
                                    ? 'color:green;' : 'color:#ECAA3C;'">{{ row.childSys == 'PC_CAR_TEAM' ? '车队' :
        row.childSys ==
            'PC_TRAVEL_AGENCY'
            ? '旅行社' : row.childSys ==
                'PC_HOTEL'
                ? '酒店' : '无' }}</span> -->
                                <span>{{ childSys_api(row.childSys) }}</span>
                            </template>
                            <!-- <template v-if="item.field == 'sysType'" #="{ row, column, $index }">
                                <span style="color:black">电脑端-单位</span>
                            </template> -->

                            <template v-if="item.field == 'ocState'" #="{ row, column, $index }">
                                <span :style="row.ocState == '1' ? 'color:green;' : row.ocState ==
                                    '0' ? 'color:red;' : 'color:red;'">{{ row.ocState == '1' ? '已开启' : row.ocState ==
        '0' ? '已关闭' : '无' }}</span>
                            </template>
                            <template v-if="item.field == 'isAffix'" #="{ row, column, $index }">
                                <span :style="row.isAffix == '1' ? 'color:red;' : row.isAffix ==
                                    '0' ? 'color:#ccc;' : 'color:red;'">{{ row.isAffix == '1' ? '固定' : row.isAffix ==
        '0' ? '否' : '无' }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </div>

            <!-- <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true" layout="prev, pager, next, jumper,->,sizes,total,"
                    :total="total" />
            </div> -->
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:75px;z-index: 2;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="60%" :close-on-click-modal='false'>
            <el-form :model="add_data" :rules="rules" ref="adupSrcMenuFm" label-width="100px" label-suffix="：">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName" required>
                            <el-input v-model="add_data.menuName" placeholder="如：客户列表" maxlength="10" show-word-limit>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单图标" prop="micon">
                            <el-input v-model="add_data.micon" placeholder="仅Elementui-plus中的图标类名，如：Edit" maxlength="50"
                                show-word-limit :disabled="add_data.mtype == 'FILTER'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="路由地址" prop="routeLink">
                            <el-input type="textarea" v-model="add_data.routeLink"
                                placeholder="如：/menu-man/src-menu-list@SrcMenuList" maxlength="200" show-word-limit
                                :autosize="{ minRows: 3, maxRows: 6 }">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请求地址" prop="url">
                            <el-input v-model="add_data.url" placeholder="如：/menu/addMenu" maxlength="200" show-word-limit
                                :disabled="add_data.mtype == 'SIDEBAR_MENU_GROUP'" @blur="createNewPerms">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="权限标志" prop="perms">
                            <el-input v-model="add_data.perms" placeholder="如：menu:addMenu" maxlength="100" show-word-limit
                                :disabled="add_data.mtype == 'SIDEBAR_MENU_GROUP'">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属系统" prop="childSys" required>
                            <el-select v-model="add_data.childSys" placeholder="请选择菜单所属子系统" style="width: 100%">
                                <!-- <el-option label="车 队" value="PC_CAR_TEAM"></el-option>
                                <el-option label="旅行社" value="PC_TRAVEL_AGENCY"></el-option>
                                <el-option label="酒店" value="PC_HOTEL"></el-option> -->
                                <el-option v-for="item in childSys_list" :key="item.id" :label="item.text"
                                    :value="item.id"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单类型" prop="mtype" required>
                            <el-select v-model="add_data.mtype" placeholder="请选择菜单类型" @change="onChangeMtype"
                                style="width: 100%">
                                <el-option label="侧边栏菜单组" value="SIDEBAR_MENU_GROUP"></el-option>
                                <el-option label="侧边栏菜单" value="SIDEBAR_MENU"></el-option>
                                <el-option label="筛选条件" value="FILTER"></el-option>
                                <el-option label="按钮" value="BUTTON"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="固定状态" prop="isAffix" required v-if="add_data.mtype == 'SIDEBAR_MENU'">
                            <el-radio-group v-model="add_data.isAffix">
                                <el-radio :label="0">不固定</el-radio>
                                <el-radio :label="1">固定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-button @click="ok_btn" style="margin-left:50vw;margin-top:5px" type="primary">确认提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>

import Sortable from 'sortablejs';
import { ref, reactive, onMounted, computed } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, getAllSrcMenuList, adupSrcMenu, getSysTypes, getMenuTypes,
    delSrcMenu, srcMenuListSort
} from '@/api/rights_management.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import CircularJSON from 'circular-json'
import { line2treeData, scopy, tree2lineData } from '@/utils/common.js'
onMounted(async () => {
    let original_menu = JSON.parse(localStorage.getItem('original_menu'))
    if (original_menu) {
        find_data.find = original_menu.find
        find_data.childSys = original_menu.childSys
    }

    getPrivateSetList({
        find: '原始菜单',
        page: {
            pageNum: 1,
            pageSize: 999,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);

            // 重新赋值给列数组
            // let cols = that.U.scopy(that.fields);
            // let list = cols.filter(it => { return it.show; });
            // that.$emit('saveSet', {dgName: that.dgName, cols: list});
        }
    })
    getMenuTypes({}).then(res => { })
    getSysTypes({}).then(res => {
        childSys_list.value = res.data
    })
    // getBPermiList({}).then(res => { })
    setTimeout(() => { rowDrop(); }, 500);
    await list_api()
})
//#region 行拖拽
const rowDrop = () => {
    const el = srcMenuListTb.value.$el.querySelectorAll('.el-scrollbar__view > table > tbody')[0];
    Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        onEnd: evt => {

            // 拖动对象下标, 目标对象下标
            let dropIndex = evt.oldIndex, targetIndex = evt.newIndex;

            // 拖动对象
            let dropObj = linelist.value[dropIndex];
            // 目标对象
            let targetObj = linelist.value[targetIndex];

            // 传入接口参数对象
            let ps = {
                unitNum: dropObj.unitNum,
                prevId: dropObj.id,
                currId: targetObj.id
            };

            if (dropObj.id == targetObj.id || dropIndex == targetIndex) {

                ElMessage({
                    message: '[拖动对象]与[目标对象]一样，不做处理',
                    type: 'warning',
                })
                // 需要清空一下，不然会出现数据错乱问题
                list_data.value = [];
                // 重新请求数据
                list_api()
            } else if (targetObj.num.indexOf(dropObj.num) == 0) {

                ElMessage({
                    message: '[拖动对象]与[目标对象]一样，不做处理',
                    type: 'warning',
                })
                // 需要清空一下，不然会出现数据错乱问题
                list_data.value = [];
                // 重新请求数据
                list_api()
            } else {
                // 发送请求，保存结果
                srcMenuListSort(ps).then(res => {
                    if (res.code != 1) {

                        return ElMessage({
                            message: '[拖动对象]与[目标对象]一样，不做处理',
                            type: 'warning',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'success'
                        })

                        // 需要清空一下，不然会出现数据错乱问题
                        list_data.value = [];
                        // 重新请求数据
                        list_api()
                    }
                });
            }
        }
    });
}
//#endregion

//#region 表格数据处理
const table_data_list = reactive([
    { label: '菜单名称', field: 'menuName', width: 200, off: true },
    { label: '菜单类型', field: 'mtype', width: 120, off: true },
    { label: '所属系统', field: 'childSys', width: 140, off: true },
    { label: '序号', field: 'sortNo', width: 60, off: true },
    { label: '层级标志', field: 'num', width: 100, off: true },
    { label: '前端路由地址', field: 'routeLink', width: 500, off: true },
    { label: '权限标识/资源URL', field: 'url', width: 350, off: true },
    // { label: '所属系统', field: 'sysType', width: 120, off: true },
    { label: '开关状态', field: 'ocState', width: 120, off: true },
    { label: '是否固定', field: 'isAffix', width: 120, off: true },
    { label: '添加时间', field: 'addTime', width: 170, off: true },
])
const childSys_api = (e) => {
    let data = ''
    for (let i = 0; i < childSys_list.value.length; i++) {

        if (e == childSys_list.value[i].id) {
            data = childSys_list.value[i].text
        }
    }
    return data
}
const childSys_list = ref([])
const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
    console.log(table_data_list)
    console.log(table_data_list_new.value)
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '原始菜单',
        tbNum: "original_menu",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion

//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    find: '',
    childSys: ''
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}
const linelist = ref([])
const list_api = () => {

    getAllSrcMenuList(find_data).then(res => {
        let list = res.data
        for (let i in list) { list[i].checked = false; }
        list_data.value = line2treeData(list, 'pid', 'sortNo');
        linelist.value = tree2lineData(scopy(list_data.value));
        // total.value = res.data.total
    })
    // 取消当前行选中
    srcMenuListTb.value.clearSelection();
    // 取消当前行高亮
    srcMenuListTb.value.setCurrentRow();
    // 保存选中的行数据
    table_list.value = [];
}
//#endregion

//#region 添加
const rules = reactive({
    menuName: [{ required: true, message: '菜单名称不能为空', trigger: ['blur', 'change'] }],
    num: [{ required: true, message: '层级标志不能为空', trigger: ['blur', 'change'] }],
    mtype: [{ required: true, message: '菜单类型不能为空', trigger: 'change' }],
    childSys: [{ required: true, message: '菜单所属子系统不能为空', trigger: 'change' }],
    isAffix: [{ required: true, message: '固定状态不能为空', trigger: 'change' }],
})
const createNewPerms = () => {
    let v = add_data.url

    // 将‘/’（除第一个）替换成‘-’，最后一个‘/’替换成‘:’
    if (v && v.indexOf('/') != -1) {
        let c = getCountOfStr(v, '/');
        if (c === 1) {
            // 如果‘/’只有一个，且在第一位，则替换成‘:’
            if (v.indexOf('/') == 0) v = v.replace('/', ':');
        } else if (c > 1) {
            // 第一个字符是‘/’，则去掉
            if (v.indexOf('/') == 0) v = v.substring(1);
            // 如果最后一个字符是‘/’，则去掉
            if (v.lastIndexOf('/') == v.length - 1) v = v.substring(0, v.length - 1);
            // 将最后一个‘/’替换成‘:’
            v = v.substring(0, v.lastIndexOf('/')) + ":" + v.substring(v.lastIndexOf('/') + 1);
            v = v.replace(/\//g, '-');
        }

        add_data.perms = v;
    }
}
/**
    * 获取指定字符串中指定字符的个数
    * @param str   总字符串
    * @param m     查找字符串
    */
const getCountOfStr = (str, m) => {
    let result = str.match(new RegExp(m, 'g'));
    return !result ? 0 : result.length;
}
const onChangeMtype = (e) => {
    if (e == 'SIDEBAR_MENU_GROUP') {// 选择的是侧边栏菜单组
        // 清空请求地址、权限标志
        add_data.url = '';
        add_data.perms = '';
    } else if (e == 'FILTER') {// 选择的是筛选条件
        add_data.micon = '';
    }
}
const add_off = ref(false)
const title = ref('添加原始菜单')
const add_data = reactive({
    childSys: '',
    id: "",
    isAffix: 0,
    menuName: "",
    micon: "",
    mtype: "SIDEBAR_MENU_GROUP",
    perms: "",
    pid: "",
    routeLink: "",
    // sysType: "PC_COMPANY",//单位 PC_COMPANY   后台 PC_BACK
    url: "",
})





const add_btn = () => {
    title.value = '添加原始菜单'
    if (table_list.value.length > 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    } else if (table_list.value.length == 1) {
        add_data.childSys = table_list.value[0].childSys
        add_data.id = ''
        add_data.isAffix = 0
        add_data.menuName = ''
        add_data.micon = ''
        add_data.mtype = table_list.value[0].mtype
        add_data.perms = ''
        add_data.pid = table_list.value[0].id
        add_data.routeLink = ''
        // add_data.sysType = 'PC_COMPANY'
        add_data.url = ''
    } else if (table_list.value.length <= 1) {
        add_data.childSys = ''
        add_data.id = ''
        add_data.isAffix = 0
        add_data.menuName = ''
        add_data.micon = ''
        add_data.mtype = 'SIDEBAR_MENU_GROUP'
        add_data.perms = ''
        add_data.pid = ''
        add_data.routeLink = ''
        // add_data.sysType = 'PC_COMPANY'
        add_data.url = ''
    }
    add_off.value = true

}


//#endregion

//#region 表格选择
const srcMenuListTb = ref('')
const table_list = ref([])
const selection_change_btn = (row, column, event) => {
    let index = table_list.value.findIndex(it => row.id == it.id);
    if (index != -1) {
        // 已选中，则取消当前行的选中和高亮

        // 取消当前行选中
        srcMenuListTb.value.clearSelection();
        // 取消当前行高亮
        srcMenuListTb.value.setCurrentRow();
        // 保存选中的行数据
        table_list.value = [];
    } else {
        // 取消当前行选中
        srcMenuListTb.value.clearSelection();
        // 选中当前行
        srcMenuListTb.value.toggleRowSelection(row, true);
        // 高亮选中
        srcMenuListTb.value.setCurrentRow(row);
        // 保存选中的行数据
        table_list.value = [row];

    }
    console.log(table_list.value)
}
//#endregion
//#region 修改
const up_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    title.value = '修改原始菜单'


    add_data.childSys = table_list.value[0].childSys
    add_data.isAffix = table_list.value[0].isAffix
    add_data.menuName = table_list.value[0].menuName
    add_data.micon = table_list.value[0].micon
    add_data.id = table_list.value[0].id
    add_data.mtype = table_list.value[0].mtype
    add_data.perms = table_list.value[0].perms
    add_data.pid = table_list.value[0].pid
    add_data.routeLink = table_list.value[0].routeLink
    // add_data.sysType = table_list.value[0].sysType
    add_data.url = table_list.value[0].url

    add_off.value = true
}
//#endregion
// /menu-man/src-menu-list@SrcMenuList
// /company/cus/companyCusList
// 提交
const adupSrcMenuFm = ref('')
const ok_btn = () => {

    adupSrcMenuFm.value.validate((valid) => {
        if (!valid) {
            return false;
        } else {
            if (title.value == '添加原始菜单') {
                adupSrcMenu(add_data).then(res => {
                    if (res.code == 1) {
                        list_api()
                        add_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            } else {


                adupSrcMenu(add_data).then(res => {
                    if (res.code == 1) {
                        list_api()
                        add_off.value = false
                        return ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        return ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }
        }


    })


}


//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        '<span style="color:#FFB06F;">此操作将会删除所有关联此菜单的单位菜单数据，确认删除吗？<b style="color:red;">【请谨慎操作】</b></span>',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
            dangerouslyUseHTMLString: true,
        }
    )
        .then(() => {
            delSrcMenu({
                id: table_list.value[0].id
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 搜索
const search_btn = () => {
    localStorage.setItem('original_menu', CircularJSON.stringify(find_data))
    list_api()
}
//#endregion
</script>

<style scoped lang='scss'>
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}

.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
<style scoped>
:deep(.el-table__body tr.current-row>td) {
    color: #28A458;
    background: rgb(197, 213, 255) !important;
}
</style>
